@CHARSET "UTF-8";

/*!
 * =================================
 * New Page Style
 * @author: mylan93@163.com
 * =================================
 */

/* ! Style Check List
 * =================================
 * Utility
 * ====================
 * Icon
 * =================================
 * home Page
 * ====================
 * train page
 * =================================
 */

/* 
 * =================================
 *  Utility
 * =================================
 */

body {
    font-weight: bold;
}

.no-margin {
    margin: 0;
}

/*
 * =================================
 * Icon
 * =================================
 */
.breakfast {
    background: url('../image/breakfast.png') no-repeat center;
    background-size: contain;
}

.lunch {
    background: url('../image/lunch.png') no-repeat center;
    background-size: contain;
}

.dinner {
    background: url('../image/dinner.png') no-repeat center;
    background-size: contain;
}

.active .breakfast {
    background: url('../image/breakfast-hover.png') no-repeat center;
    background-size: contain;
    
}

.active .lunch {
    background: url('../image/lunch-hover.png') no-repeat center;
    background-size: contain;
}

.active .dinner {
    background: url('../image/dinner-hover.png') no-repeat center;
    background-size: contain;
}


.training {
    background: url('../image/training.png') no-repeat;
    background-size: contain;
}

.warm-up {
    background: url('../image/warm-up.png') no-repeat;
    background-size: contain;
}

.stretching {
    background: url('../image/stretching.png') no-repeat;
    background-size: contain;
}

.extra-meal {
    background: url('../image/snacks.png') no-repeat;
    background-size: contain;
}


.show-down .training {
    background: url('../image/training-down.png') no-repeat;
    background-size: contain;
}

.show-down .warm-up {
    background: url('../image/warm-up-down.png') no-repeat;
    background-size: contain;
}

.show-down .stretching {
    background: url('../image/stretching-down.png') no-repeat;
    background-size: contain;
}

.show-down .extra-meal {
    background: url('../image/snacks-down.png') no-repeat;
    background-size: contain;
}

/* 
 * =================================
 *  home page
 * =================================
 */
.page.courseware {
    background-color: #000;
}

.breakfast-page a.button-link,
.courseware a.button-link,
.courseware a.button-link:focus,
.courseware a.button-link:active,
.courseware a.button-link:hover,
.breakfast-page a.button-link:focus,
.breakfast-page a.button-link:active,
.breakfast-page a.button-link:hover, {
    font-size: .65rem;
    color: #fff;
}

.courseware .title,
.bar {
  color: #fff;
  font-size: .7rem;
  font-weight: bold;
  background: #313131;
}

.courseware ul {
    background-color: #000;
}

.courseware .item-content {
    padding: 0 .75rem;
    background: #201f1f;
    background: -webkit-linear-gradient(top, #201f1f 0%,#272626 100%);
    background: linear-gradient(to bottom, #201f1f 0%,#272626 100%); 
}

.diet-wrap {
    margin: 0;
    color: #fdd907;
}

.diet-wrap .item-content {
    margin-top: 3px;
    font-size: .6rem;
}

.diet-wrap .scope-diet {
    margin-top: 0;
    min-height: 3rem;
    background: #4e4e4e;
    background: -webkit-linear-gradient(top, #4e4e4e 0%,#202020 100%);
    background: linear-gradient(to bottom, #4e4e4e 0%,#202020 100%); 
}

.diet-wrap .item-title {
    width: 4rem;
    font-size: .6rem;
    font-weight: bold;
}

.week .item-content {
    margin-top: .25rem;
}

.diet-wrap .item-content a {
    font-size: .75rem;
    font-weight: bold;
    color: #fdd907;
}

.diet-wrap .scope-diet .item-inner {
    padding: 0;
}

.diet-wrap .item-inner {
    -webkit-justify-content: flex-start; 
  justify-content: flex-start;
}

.diet-wrap .item-after {
    -webkit-flex: 1;
    flex: 1;
    max-height: none;
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
}

.courseware .content-block-title {
    padding-left: .75rem;
    margin: 0;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: .85rem;
    font-weight: bold;
    color: #fff;
}

.courseware .bar:after,
.diet-wrap ul:before,
.diet-wrap ul:after,
.diet-wrap .item-inner:after,
.week ul:before,
.week ul:after,
.week .item-inner:after {
    height: 0;
}

.week .item-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.week .item-title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 2.5rem;
}

.active .item-title {
    color: #fedb04;
}

.week .item-after {
  font-size: .85rem;
}


.week .item-content:first-child {
    margin-top: 0;
} 

.week .item-content a,
.week .item-content .item-after {
    color: #fff;
}

.button-yellow {
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    font-weight: bold;
  border: 0;
  border-radius: 0;
  color: #313131;
  background: #ffdd01;
    background: -webkit-linear-gradient(top, #ffdd01 0%,#f3c223 100%);
    background: linear-gradient(to bottom, #ffdd01 0%,#f3c223 100%); 
}


.button-yellow.active,
.button-yellow:active,
.button-yellow:hover,
.button-yellow:focus {
    color: #313131;
}
/* 
 * =================================
 *  Page Icons
 * =================================
 */

.diet-icon {
    display: block;
    margin: 0 5%;
    width: 25%;
    height: 3rem;
    text-align: center;
}

.diet-icon:first-child {
    margin-left: 0;
}

.diet-icon.active {
    background-color: #fedd02;
}

.diet-icon .icon {
    width: 2.4rem;
    height: 100%;
}

.train-icon {
    display: inline-block;
    margin-top: .25rem;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

/* ===========================
 * train page
 * ===========================
 */
.train-item {
    margin-top: .25rem;
    line-height: 2.2rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold;
    background: #201f1f;
    background: -webkit-linear-gradient(top, #201f1f 0%,#272626 100%);
    background: linear-gradient(to bottom, #201f1f 0%,#272626 100%); 
}

.train-item:first-child {
    margin-top: 0;
}

.train-item .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 4.2rem;
    line-height: 4.2rem;
    padding-left: 2.1rem;
    padding-right: 2.1rem;
}

.train-item .icon {
    font-size: .8rem;
    font-weight: normal;
}

.train-item span {
    display: inline-block;
    vertical-align: middle;
}

.train-item .inner {
    flex: 1;
    -webkit-flex: 1;
    margin: 0 .25rem 0  .75rem; 
}

/* .train-item.active {
    color: #2e3030;
    background: #fdd907;
}
 */
.train-item.show-down .item {
    color: #fdd907;
}

.intro {
    height: 18rem;
    padding:0 2.1rem 0;
    color: #666;
    line-height: 1.4;
    background: #fff;
    overflow-y: scroll;
}

.intro-title {
    padding-top: .5rem;
    line-height: 1.5rem;
    font-size: .75rem;
    color: #242323;
    border-bottom: 1px solid #000;
}

.intro p {
    color: #666;
    font-size: .6rem;
}

.breakfast-page {
    background: #fff;
}
 
.breakfast-page header {
    background: #000;
}

.breakfast-page .title,
.courseware .button-link,
.breakfast-page .button-link {
    color: #fff;
}

.breakfast-page h1.body-title {
    padding: .9rem 1.5rem;
    line-height: 1.2rem;
    font-size: .75rem;
    text-align: center;
}

.main-body img {
    display: block;
}

.main-body p {
    margin: 0;
    padding: 0 1.5rem;
    font-size: .6rem;
    line-height: 1.7rem;
}

.category-box {
    margin-top: .25rem;
    display: flex;
}

.category-box span {
    flex: 1;
    font-size: .7rem;
    font-weight: bold;
    color: #999;
}

.show-down {
    padding: 0 0;
    
    /* transition: all 1s;
    -webkit-transition: all 1s;   */ 
}

.show-down .item {
    height: 2.2rem;
    line-height: 2.2rem;
}

.show-up {
    /* padding: 1rem 0; */
    transition: padding 1s;
    -webkit-transition: padding 1s;   
}

.show-up .item {
    height: 4.2rem;
    line-height: 4.2rem;
    /* transition: height 1s;
    -webkit-transition: height 1s;   */ 
}

.show-up .description-box {
    display: none;
}

.show-down .description-box {
    display: block;
}

.video-box {
    height: 9rem;
}

.movement-type {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #F8D300;
}

.rest {
    margin-top: 3rem;
    font-size: 2rem;
    color: #fff;
}

.video-damage-note {
  left: 2.1rem !important;
  right: 2.1rem !important;
  font-size: .75rem !important;
  color: #999 !important;
}